android/settings.gradle (1)

Line range hint 1-9: Verify duplicate inclusion of React Native Gradle plugin

There appears to be duplicate inclusion of the React Native Gradle plugin:

1. Line 1: includeBuild("../node_modules/@react-native/gradle-plugin")
2. Line 7: includeBuild('../node_modules/@react-native/gradle-plugin')

This redundancy should be removed to avoid potential build conflicts.

 pluginManagement { includeBuild("../node_modules/@react-native/gradle-plugin") }
 plugins { id("com.facebook.react.settings") }
 extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
 
 rootProject.name = 'azusa-player-mobile'
 include ':app'
-includeBuild('../node_modules/@react-native/gradle-plugin')
 
 apply from: new File(["node", "--print", "require.resolve('expo/package.json')"].execute(null, rootDir).text.trim(), "../scripts/autolinking.gradle")

src/utils/Bilibili/BiliUser.ts (1)

33-43: Improve error handling and logging

While the error handling is a good addition, we're silently swallowing errors which could make debugging issues difficult.

Consider adding error logging:

  try {
    const guards = await getUserGuard();
    return (
      guards.filter(
        (guard: any) =>
          guard.guard_level > 0 && hasGuard.includes(guard.target_id),
      ).length > 0
    );
-  } catch {
+  } catch (error) {
+    logger.error(`Failed to check guard status: ${error}`);
    return false;
  }

src/components/setting/AboutSettings.tsx (2)

Line range hint 25-46: Consider improving button labels

The button label 'Gayhub' might be inappropriate or unclear. Consider using more professional and descriptive labels, preferably from translation keys.

-            {'Gayhub'}
+            {t('About.GithubReleases')}

---

48-54: Consider using theme values for consistent styling

The hardcoded fontSize and padding values could be derived from theme constants for better maintainability and consistency across the app.

 const styles = StyleSheet.create({
   text: {
-    fontSize: 20,
-    paddingHorizontal: 20,
+    fontSize: theme.typography.fontSize.large,
+    paddingHorizontal: theme.spacing.medium,
   },
   centeredRowContainer: { flexDirection: 'row', justifyContent: 'center' },
 });

src/components/billing/View.tsx (3)

19-25: Consider adding error state handling to the LoadingWrapper.

While the loading state management is clean, consider adding error state handling to provide better feedback to users when operations fail.

 interface LoadingChildrenProps {
   setLoading: React.Dispatch<React.SetStateAction<boolean>>;
+  setError: React.Dispatch<React.SetStateAction<string | null>>;
 }

 const LoadingIconWrapper = ({ Child }: LoadingWrapperProps) => {
   const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
   if (loading) {
     return <ActivityIndicator />;
   }
+  if (error) {
+    return <Text style={{ color: 'red' }}>{error}</Text>;
+  }
-  return <Child setLoading={setLoading} />;
+  return <Child setLoading={setLoading} setError={setError} />;
 };

---

89-105: Add accessibility support and improve image handling.

Consider adding accessibility labels and moving the image URL to configuration.

 const VIPScreen = () => {
   const { t } = useTranslation();
   return (
-    <View style={mStyle.container}>
+    <View 
+      style={mStyle.container}
+      accessible={true}
+      accessibilityLabel={t('Billing.VIPScreenLabel')}
+    >
       <Image
         style={mStyle.azusaMock}
         source={{
-          uri: 'https://img.nga.178.com/attachments/mon_202202/01/-zue37Q2p-6rfwK2dT1kShs-b4.jpg',
+          uri: IMAGES.AZUSA_MOCK,
         }}
+        accessibilityRole="image"
+        accessibilityLabel={t('Billing.VIPImageLabel')}
       />

---

107-131: Name the default export component and organize styles.

The default export should be a named component for better debugging and component hierarchy understanding.

-export default () => {
+const BillingView = () => {
   const vip = useVIP(state => state.VIP);
 
   if (vip) {
     return <VIPScreen />;
   }
   return <PurchaseVIPScreen />;
 };
+
+export default BillingView;

src/components/style.ts (2)

Line range hint 13-42: Consider improving type safety by reducing any assertions.

The code uses multiple as any type assertions which bypass TypeScript's type checking. This could lead to runtime errors that TypeScript could catch at compile time.

Consider:

1. Creating proper interfaces for the custom properties
2. Using proper type guards instead of type assertions
3. Documenting the HACK comment with a TODO for future improvement

Example refactor:

interface CustomMetaData extends NoxTheme.MetaData {
  // Add additional custom metadata properties
}

interface CustomStyle extends NoxTheme.Style {
  metaData: CustomMetaData;
  customColors: Record<string, string>;
  // Add other custom properties
}

export const createStyle = (
  customStyle: CustomStyle | NoxTheme.AdaptiveStyle = AzusaTheme,
) => {
  const refTheme = customStyle.metaData.darkTheme ? NoxTheme : AzusaTheme;
  return StyleSheet.create({
    metaData: {
      ...refTheme.metaData,
      // TODO: Improve type safety of metadata merging
      ...customStyle.metaData,
    },
    // ... rest of the implementation
  });
};

---

Line range hint 89-98: Enhance error handling for invalid colors.

The current implementation logs errors but continues with invalid colors, which could lead to runtime visual issues.

Consider throwing an error or returning a safe fallback color:

export const replaceStyleColor = ({
  playerStyle,
  primaryColor = playerStyle.colors.primary,
  // ... other params
}: ReplaceStyleColor) => {
  const colors = [primaryColor, secondaryColor, contrastColor, backgroundColor];
  if (!validateColors(colors)) {
    logger.error('[color converter] Invalid colors:', colors);
    // Either throw an error
    throw new Error('Invalid color values provided');
    // Or use fallback colors
    return {
      ...playerStyle,
      colors: {
        ...playerStyle.colors, // Keep original colors as fallback
      }
    };
  }
  // ... rest of the implementation
};

src/components/explore/SongTab.tsx (3)

8-8: Consider optimizing style imports

The imported styles from '../style' is only used for the flex style. Consider moving this style to the local StyleSheet or creating a shared styles file for commonly used styles.

Also applies to: 19-19

---

Line range hint 44-66: Consider extracting remaining inline styles

While the move to StyleSheet is good, there are still inline styles that could be extracted:

• Text styles with dynamic colors
• Padding and flex styles

Consider this approach for better style organization:

// In the StyleSheet
textTitle: {
  fontSize: 20,
  paddingLeft: 5,
  flex: 1,
},
textSubtitle: {
  paddingLeft: 5,
},

// In the component
<Text 
  style={[
    style.textTitle, 
    { color: fontColor }
  ]}
>

---

170-183: Improve responsive design handling

The current implementation has potential responsiveness issues:

1. Direct usage of Dimensions.get('window').width might not update on orientation changes
2. Hardcoded height values might not work well across different screen sizes

Consider these improvements:

1. Use the useWindowDimensions hook for responsive dimensions that update with orientation changes
2. Use relative units or flex for height calculations
3. Consider implementing a responsive design system

Example implementation:

import { useWindowDimensions } from 'react-native';

// Inside component
const { width } = useWindowDimensions();

// In StyleSheet
cardContainer: {
  width: width * 0.8,
  flex: 1,  // Instead of fixed height
  maxHeight: 390, // Optional maximum height
  paddingHorizontal: 5,
  paddingRight: 10,
},

src/components/setting/View.tsx (1)

99-104: Consider optimal placement for premium features.

While the implementation is correct, consider moving the premium settings item higher in the list for better visibility and to emphasize its importance. Common patterns place premium/subscription options near the top of settings menus for better discovery.

@@ -45,6 +45,11 @@
        ]}
      >
        <ScrollView>
+         <SettingListItem
+           icon={NoxView.PREMIUM}
+           settingName="PremiumSetting"
+           onPress={() => navigation.navigate(NoxView.PREMIUM)}
+           settingCategory="Settings"
+         />
          <SettingListItem
            icon={NoxView.HOME}
            settingName="GeneralSetting"

package.json (1)

127-127: Consider updating metro resolution

The metro resolution is maintained while other resolutions were removed. Consider if this resolution is still necessary or if it can be removed for consistency.

src/localization/en/translation.json (1)

213-214: Enhance premium settings description

The description could be more informative about the available premium features.

Consider this improvement:

     "PremiumSettingName": "Premium APM",
-    "PremiumSettingDesc": "Buy Premium features",
+    "PremiumSettingDesc": "Upgrade to Premium for an ad-free experience and exclusive features",

src/hooks/useVIP.ts (1)

68-70: Add dependency to useEffect hook for clarity

While the empty dependency array in useEffect ensures the init function runs once on mount, it's good practice to include all external dependencies to avoid potential issues in the future.

Modify the useEffect to include init as a dependency:

 useEffect(() => {
   init();
-}, []);
+}, [init]);

If init is defined within the component, this change ensures consistency and clarity, especially if init relies on props or state that may change.

Configuration used: CodeRabbit UI
Review profile: CHILL

#!/bin/bash
# Check React Native version and related configurations
echo "Checking React Native version..."
if [ -f package.json ]; then
    jq '.dependencies["react-native"]' package.json
    echo "Checking for any custom React Native configurations..."
    # Look for any custom React Native configurations in gradle files
    find android -name "*.gradle" -type f -exec grep -l "react-native" {} \;
fi

#!/bin/bash
# Check contents of identified Gradle files
echo "=== android/app/build.gradle ==="
grep -A 10 "react-native" android/app/build.gradle

echo -e "\n=== android/build.gradle ==="
grep -A 10 "react-native" android/build.gradle

echo -e "\n=== android/settings.gradle ==="
cat android/settings.gradle

#!/bin/bash
# Check for other splash screen duration references
rg "useSplash.*[0-9]+" -A 2

#!/bin/bash
# Check how useSetupPlayer handles the vip prop
ast-grep --pattern 'useSetupPlayer = ({ $_, vip }) => {
  $$$
}'

#!/bin/bash
# Check the implementation of useSetupVIP to understand initialization timing
ast-grep --pattern 'export const useSetupVIP = () => {
  $$$
}'

#!/bin/bash
# Let's try finding the hook implementation with ripgrep
rg -l "useSetupVIP" --type ts --type tsx

# Then examine the content of any matching files
rg "useSetupVIP" -A 10 --type ts --type tsx

#!/bin/bash
# Search for the hook implementation without file type restrictions
rg -l "useSetupVIP"

# Then examine the content of files containing the hook
rg "useSetupVIP" -A 10

onPress={async () => {
  try {
    await playAsSearchList({
      songs: totalSongs ?? songs,
      song: item,
    });
    await new Promise(resolve => setTimeout(resolve, 500));
    scroll();
  } catch (error) {
    // Handle error appropriately
    console.error('Failed to play song:', error);
  }
}}

#!/bin/bash
# Search for setTimeout usage with scroll-related functionality
rg -A 3 "setTimeout.*scroll" 

#!/bin/bash
# Search for scroll function definition and usage
ast-grep --pattern 'const scroll = $_'

# Search for playAsSearchList implementation
ast-grep --pattern 'const playAsSearchList = $_'

# Search for any comments or patterns related to scroll timing
rg -B 2 -A 2 'scroll.*500'

#!/bin/bash
# Search for useNoxSetting implementation
ast-grep --pattern 'const useNoxSetting = $_'

# Search for incSongListScrollCounter definition
ast-grep --pattern 'incSongListScrollCounter: $_'

# Search for any related state updates
rg "songListScrollCounter" -B 2 -A 2

#!/bin/bash
# Description: Check if the translation key exists in localization files

# Search for the translation key in all translation files
rg -l "PremiumName" --type json

#!/bin/bash
# Check the actual content of translation files to verify the key structure
rg "PremiumName" --json src/localization/en/translation.json src/localization/zhcn/translation.json

#!/bin/bash
# Check if the translation key is under the correct 'appDrawer' namespace
rg -A 5 -B 5 '"appDrawer"' src/localization/en/translation.json src/localization/zhcn/translation.json

#!/bin/bash
# Check for billing-related configuration files
fd -g "*billing*" -g "*purchase*" || echo "No billing configuration files found"

# Search for billing-related code
rg -l "react-native-purchases|RevenueCat|StoreKit|Billing" || echo "No billing implementation found"

#!/bin/bash
# Fetch latest versions and security advisories
echo "Checking @sharcoux/slider..."
curl -s "https://registry.npmjs.org/@sharcoux/slider" | jq '.versions["8.0.5"].dist.integrity'

echo "Checking expo..."
curl -s "https://registry.npmjs.org/expo" | jq '.versions["52.0.4"].dist.integrity'

echo "Checking react-native-svg..."
curl -s "https://registry.npmjs.org/react-native-svg" | jq '.versions["15.9.0"].dist.integrity'

# Check for known vulnerabilities
gh api graphql -f query='
{
  securityVulnerabilities(first: 5, ecosystem: NPM, package: "expo") {
    nodes {
      advisory {
        summary
        severity
        publishedAt
      }
      vulnerableVersionRange
    }
  }
}'

#!/bin/bash
# Check changelogs and release information
echo "Checking @sharcoux/slider changelog..."
curl -s "https://raw.githubusercontent.com/Sharcoux/slider/master/CHANGELOG.md" || \
curl -s "https://api.github.com/repos/Sharcoux/slider/releases/tags/v8.0.5"

echo -e "\nChecking expo changelog..."
curl -s "https://raw.githubusercontent.com/expo/expo/main/CHANGELOG.md" || \
curl -s "https://api.github.com/repos/expo/expo/releases/tags/sdk-52.0.4"

echo -e "\nChecking react-native-svg changelog..."
curl -s "https://raw.githubusercontent.com/software-mansion/react-native-svg/master/CHANGELOG.md" || \
curl -s "https://api.github.com/repos/software-mansion/react-native-svg/releases/tags/v15.9.0"

# Check for any security advisories for the other packages
gh api graphql -f query='
{
  securityVulnerabilities(first: 5, ecosystem: NPM, package: "react-native-svg") {
    nodes {
      advisory {
        summary
        severity
        publishedAt
      }
      vulnerableVersionRange
    }
  }
}'

#!/bin/bash
# Check changelog and release info for @sharcoux/slider
echo "Checking @sharcoux/slider release info..."
curl -s "https://api.github.com/repos/Sharcoux/slider/releases/tags/v8.0.5"

echo -e "\nChecking @sharcoux/slider commits between versions..."
curl -s "https://api.github.com/repos/Sharcoux/slider/compare/v8.0.4...v8.0.5"

#!/bin/bash
# Check npm registry for package information
echo "Checking @sharcoux/slider npm package info..."
curl -s "https://registry.npmjs.org/@sharcoux/slider" | jq '.versions["8.0.5"].dist.integrity, .versions["8.0.5"].time, .versions["8.0.5"].description'

# Check for any known vulnerabilities
echo -e "\nChecking for vulnerabilities..."
gh api graphql -f query='
{
  securityVulnerabilities(first: 5, ecosystem: NPM, package: "@sharcoux/slider") {
    nodes {
      advisory {
        summary
        severity
        publishedAt
      }
      vulnerableVersionRange
    }
  }
}'

#!/bin/bash
# Check for any remaining patch files and their contents
fd -e patch -x cat {} \; || echo "No patch files found"

# List all files modified in the last commit that removed the patches
git log -p --all -S "patch:react-native" --pretty=format: -G "patch:" | grep "^+" || echo "No patch-related changes found"

#!/bin/bash
# Check for patch files in the repository
fd -e patch

# Check package.json history for patch-related changes
git log -p package.json | grep -A 5 -B 5 "patch"

# Look for any gradle-plugin related configurations
fd -e gradle -e properties

#!/bin/bash
# Description: Check if all billing-related keys exist in both English and Chinese translation files
# Expected: All keys should be present in both files

# Extract billing-related keys from English translations
echo "Checking English billing keys..."
jq -r '.Billing | keys[]' src/localization/en/translation.json

echo "Checking Chinese billing keys..."
jq -r '.Billing | keys[]' src/localization/zhcn/translation.json

# Compare premium-related keys
echo "Comparing premium-related keys..."
for file in src/localization/{en,zhcn}/translation.json; do
  echo "File: $file"
  jq -r '. | to_entries[] | select(.key | test("Premium|Billing")) | .key' "$file"
done

#!/bin/bash
# Compare the actual content of billing translations
echo "English Billing translations:"
jq '.Billing' src/localization/en/translation.json

echo -e "\nChinese Billing translations:"
jq '.Billing' src/localization/zhcn/translation.json